<!--
 * @Descripttion: 用户分组管理
 * @Author: YuZhenJing
 * @Date: 2020-01-13 09:09:28
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:35:19
 -->
<template>
  <div class="user-group-list">
    <el-card body-style="padding:8px">
      <div style="margin-bottom: 10px;">
        <el-row :gutter="12">
          <el-col :span="5">
            <el-input
              clearable
              placeholder="用户分组名称"
              size="mini"
              v-model="searchParams.userGroupName"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-select
              clearable
              placeholder="用户分组类别"
              size="mini"
              style="width:100%;"
              v-model="searchParams.userGroupType"
            >
              <el-option
                :key="item.value"
                :label="item.name"
                :value="item.value"
                v-for="item in userGroupTypeOptions"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="14" style="text-align: left">
            <el-button
              :loading="tableDataParam.loading"
              @click="request"
              icon="el-icon-search"
              size="mini"
              type="primary"
              >查询</el-button
            >
            <user-group-add @request="request"></user-group-add>
          </el-col>
        </el-row>
      </div>
      <tf-page
        :current-page="tableDataParam.paginationData.currentPage"
        :data="tableDataParam.data"
        :loading="tableDataParam.loading"
        :pageSize="tableDataParam.paginationData.pageSize"
        :sort-item="tableDataParam.paginationData.sortItem"
        :total="tableDataParam.paginationData.total"
        @doChangeCurrentPage="doChangeCurrentPage"
        @doChangePageSize="doChangePageSize"
        @selectedRow="selectedRow"
        @sortChange="sortChange"
      >
        <el-table-column
          label="分组名称"
          prop="user_group_name"
          sortable="custom"
        >
          <template slot-scope="scope">{{ scope.row.userGroupName }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="creatorDate"></el-table-column>
        <el-table-column align="center" label="用户关联数" width="120">
          <template slot-scope="scope">
            <el-tag disable-transitions type="primary">
              <span v-if="scope.row.userCount != null">{{
                scope.row.userCount
              }}</span>
              <span v-else>0</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" prop="userId" width="100">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="8">
                <i
                  @click="userGroupRole(scope.row)"
                  class="el-icon-s-operation"
                  style="color:blue;cursor:pointer"
                ></i>
              </el-col>
              <el-col :span="8">
                <user-group-edit
                  :row-data="scope.row"
                  @request="request"
                ></user-group-edit>
              </el-col>
              <el-col :span="8">
                <i
                  @click="singleDel(scope.row)"
                  class="el-icon-delete"
                  style="color:red;cursor:pointer"
                  v-if="scope.row.userGroupType != 1"
                ></i>
                <i
                  class="el-icon-delete"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </tf-page>
    </el-card>
    <user-group-role ref="userGroupRoleRef"></user-group-role>
  </div>
</template>
<script>
import * as userGroupService from '@/service/user/userGroupList'
export default {
  components: {
    'tf-page': require('@/components/common/page/TfPage').default,
    'user-group-add': require('@/components/module/user/UserGroupAdd').default,
    'user-group-edit': require('@/components/module/user/UserGroupEdit')
      .default,
    'user-group-role': require('@/components/module/user/UserGroupRole').default
  },
  data() {
    return {
      // 窗体相关参数
      windowItem: {
        userGroupAdd: {
          show: false
        }
      },
      // 用户分组类别
      userGroupTypeOptions: [],
      //查询项对象
      searchParams: {},
      //分页表格相关参数
      tableDataParam: {
        loading: false,
        data: [],
        selectedData: [],
        paginationData: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          sortItem: {
            prop: 't.user_group_type, t.creator_date',
            order: 'descending'
          }
        }
      }
    }
  },
  methods: {
    ...userGroupService,
    // 排序
    sortChange(sortItem) {
      this.tableDataParam.paginationData.sortItem = {
        prop: sortItem.prop,
        order: sortItem.order
      }
      this.request()
    },
    // 用户分组设置角色
    userGroupRole(rowData) {
      this.$refs.userGroupRoleRef.show(rowData)
    },
    // 选择下拉框页码
    doChangePageSize(pageSize) {
      this.tableDataParam.paginationData.pageSize = pageSize
      this.request()
    },
    // 更改页码
    doChangeCurrentPage(currPage) {
      this.tableDataParam.paginationData.currentPage = currPage
      this.request()
    },
    // 选择行
    selectedRow(selection) {
      this.tableDataParam.selectedData = selection
    }
  },
  mounted() {
    this.searchUserGroupTypeOptions()
    this.request()
  }
}
</script>
